<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    :title="curId ? '编辑' : '新增'"
    width="700px"
    :before-close="close"
  >
    <el-form
      ref="ruleForm"
      label-position="right  "
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 使用 el-row 和 el-col 实现一行两列 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户编号" prop="customerCode">
            <el-input
              v-model="ruleForm.customerCode"
              :disabled="!!curId"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="ruleForm.customerName" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="简称" prop="shortName">
            <el-input v-model="ruleForm.shortName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="manager">
            <el-input v-model="ruleForm.manager" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机号" prop="mobilePhone">
            <el-input v-model="ruleForm.mobilePhone" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="telephone">
            <el-input v-model="ruleForm.telephone" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户来源" prop="source">
            <el-select v-model="ruleForm.source" placeholder="选择客户来源">
              <el-option
                v-for="item in sourceData"
                :key="item.paramKey"
                :label="item.paramValue"
                :value="item.paramKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户等级" prop="customerLevel">
            <el-select v-model="ruleForm.customerLevel" placeholder="选择客户等级">
              <el-option
                v-for="item in levelData"
                :key="item.paramKey"
                :label="item.paramValue"
                :value="item.paramKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类别" prop="customerType">
            <el-select v-model="ruleForm.customerType" placeholder="选择客户类别">
              <el-option
                v-for="item in typeData"
                :key="item.paramKey"
                :label="item.paramValue"
                :value="item.paramKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否共享" prop="isShared">
            <el-select v-model="ruleForm.isShared" placeholder="选择是否共享">
              <el-option
                v-for="item in isSharedData"
                :key="item.paramKey"
                :label="item.paramValue"
                :value="item.paramKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户地区" prop="region">
            <el-select v-model="ruleForm.region" placeholder="选择客户地区">
              <el-option
                v-for="item in regionData"
                :key="item.paramKey"
                :label="item.paramValue"
                :value="item.paramKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address" clearable />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { getCustomer, updateCustomer, createCustomer, generateCustomerCode } from '@/api/customer/info'
import { getOption } from '@/api/system/parameter'

export default {
  name: 'CuForm',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    curId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      ruleForm: {
        customerCode: '',
        customerName: '',
        shortName: '',
        address: '',
        manager: '',
        mobilePhone: '',
        telephone: '',
        email: '',
        customerLevel: '',
        customerType: '',
        region: '',
        source: '',
        isShared: '',
        remark: ''
      },
      sourceData: [],
      levelData: [],
      typeData: [],
      isSharedData: [],
      regionData: [],
      rules: {
        customerCode: [{ required: true, trigger: 'blur', message: '客户编号不能为空' }],
        customerName: [{ required: true, trigger: 'blur', message: '客户名称不能为空' }]
      }
    }
  },
  watch: {
    dialogVisible(v) {
      if (v) {
        if (this.curId) {
          getCustomer(this.curId).then(res => {
            this.ruleForm = res.data
          })
        } else {
          // 生成客户编号
          this.generateCustomerCode()
          // 客户等级
          this.getLevelData()
          // 客户类别
          this.getTypeData()
          // 是否共享
          this.getIsSharedData()
          // 客户区域
          this.getRegionData()
          // 客户来源
          this.getSourceData()
        }
      }
    }
  },
  methods: {
    close() {
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    search() {
      this.close()
      this.$emit('search')
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.curId) {
            updateCustomer(this.ruleForm).then(() => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.search()
            })
          } else {
            createCustomer(this.ruleForm).then((res) => {
              console.log(JSON.stringify(res))
              if (res.data.isSuccess) {
                this.$message.success('新增成功')
                this.search()
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 客户等级
    getLevelData() {
      getOption('customer-level').then(res => {
        this.levelData = res.data
        // 默认选中第一项
        if (this.levelData.length > 0) {
          this.ruleForm.customerLevel = this.levelData[0].paramKey
        }
      })
    },
    // 客户类别
    getTypeData() {
      getOption('customer-type').then(res => {
        this.typeData = res.data
        // 默认选中第一项
        if (this.typeData.length > 0) {
          this.ruleForm.customerType = this.typeData[0].paramKey
        }
      })
    },
    // 客户是否共享
    getIsSharedData() {
      getOption('customer-shared').then(res => {
        this.isSharedData = res.data
        // 默认选中第一项
        if (this.isSharedData.length > 0) {
          this.ruleForm.isShared = this.isSharedData[0].paramKey
        }
      })
    },
    // 客户地区
    getRegionData() {
      getOption('customer-region').then(res => {
        this.regionData = res.data
        // 默认选中第一项
        if (this.regionData.length > 0) {
          this.ruleForm.region = this.regionData[0].paramKey
        }
      })
    },
    // 客户来源
    getSourceData() {
      getOption('customer-source').then(res => {
        this.sourceData = res.data
        // 默认选中第一项
        if (this.sourceData.length > 0) {
          this.ruleForm.source = this.sourceData[0].paramKey
        }
      })
    },
    generateCustomerCode() {
      generateCustomerCode().then(res => {
        this.ruleForm.customerCode = res.data
      })
    }
  }
}
</script>
